<template>
  <section class="menu-list-wrapper">
    <ul class="menu-list">
      <!-- ,'active': navbarKey === item.key -->
      <li
        class="menu-list-item"
        :class="[
          item.key < 4 ? 'leftItem' : 'rightItem',
          { active: navbarKey === item.key },
        ]"
        v-for="item in menulist"
        :key="item.key"
      >
        <div v-if="item.path === '/'" class="menu-content">
          <span>{{ item.label }}</span>
        </div>
        <router-link v-else class="menu-link" :to="item.path">
          <span>{{ item.label }}</span>
        </router-link>

        <!-- 次级菜单 -->
        <ul class="menu-sub-list" v-if="item.children">
          <li
            class="menu-sub-list-item"
            :class="{ active: $route.path === child.path }"
            v-for="child in item.children"
            :key="child.key"
          >
            <router-link :to="child.path" class="menu-sub-link">
              <span>{{ child.label }}</span>
            </router-link>
          </li>
        </ul>
      </li>
    </ul>
  </section>
</template>

<script>
// import { mapGetters, mapMutations } from "vuex";
export default {
  name: "MenuList",
  props: ["menulist"],
  data() {
    return {
      navbarKey: 2,
    };
  },
  watch: {
    $route: {
      handler(newVal) {
        const currentMenuList =
          this.menulist &&
          this.menulist.filter((item) => {
            if (item.path === "/") {
              return (
                -1 !==
                item.children.findIndex((child) => {
                  return child.path === newVal.path;
                })
              );
            }
            return item.path === newVal.path;
          });
        if (currentMenuList.length > 0) {
          this.changeItem(currentMenuList[0].key);
        }
      },
    },
  },
  created() {
    this.init();
  },
  computed: {
    // ...mapGetters(["navbarKey"]),
  },
  methods: {
    // ...mapMutations("sider", ["SET_NAVBARKEY"]),
    // 初始化navbar的key值
    init() {
      let key = 2;
      if (!key) {
        const path = this.$router.history.current.path;
        key = this.menulist.filter((item) => item.path === path)[0].key;
        this.changeItem(key);
      }
    },
    changeItem(key) {
      this.SET_NAVBARKEY(key);
      window.sessionStorage.setItem("navbarKey", key);
    },
  },
};
</script>

<style lang="scss">
// 媒体查询的参数
$type: screen;
$proto: max-width;
$value: 1740px;

$menuHeight: 60px;
.menu-list-wrapper {
  .menu-list {
    display: flex;
    .menu-list-item {
      position: relative;
      letter-spacing: 3px;
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 130px;
        height: 30px;
        line-height: 30px;
        background: url("../assets/images/navItemBg-default.png") no-repeat;
        background-size: 100% 100%;
      }
      &.rightItem:last-child::after {
        background: url("../assets/images/navItemBg-active.png") no-repeat;
        background-size: 100% 100%;
      }
      &.leftItem::after {
        transform: rotateY(180deg);
      }

      a.menu-link,
      .menu-content {
        position: relative;
        display: inline-block;
        color: #fff;
        margin: 0 10px;
        width: 100px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        z-index: 22;

        @media #{$type} and ($proto: $value) {
          padding: 0 10px;
          font-size: 14px;
        }
      }
      &.active a.menu-link,
      &.active .menu-content {
        color: #48a4fb;
        border-bottom: 1px solid #48a4fb;
      }

      .menu-sub-list {
        position: absolute;
        width: 100%;
        z-index: 10;
        transition: all 0.3s;
        display: none;
        .menu-sub-list-item {
          margin-top: 1px;
          width: 100%;
          height: 40px;
          line-height: 38px;
          text-align: center;
          cursor: pointer;
          background: url("../assets/images/timeNumberBg.png") no-repeat;
          background-size: 110% 112%;
          background-position: center;
          a.menu-sub-link {
            display: inline-block;
            width: 100%;
            color: #fff;
            font-weight: normal;
            font-size: 15px;
            @media #{$type} and ($proto: $value) {
              font-size: 13px;
            }
          }
          &:hover a {
            color: #48a4fb;
          }
          &.active a {
            color: #00f6ff;
            color: #48a4fb;
            border: 1px solid #48a4fb;
            box-shadow: 0px 0px 6px #48a4fb inset;
          }
        }
      }
      &:hover .menu-sub-list {
        display: block;
      }
    }
  }
}
</style>